<template>
  <div class="my-order-operation">
    <operation-title
      title="订单列表"
      :icon="TitleIcon"
    />

    <div class="divider" />
    <div class="func">
      <p class="attr">
        列表项
      </p>
      <template
        v-for="(item, entranceIndex) in pageConfig.entrances"
        :key="entranceIndex"
      >
        <div class="add-item">
          <div class="title-line">
            <div class="title-block">
              {{ item.name }}
            </div>
            <div class="button-block">
              <el-switch
                v-model="item.enable"
                inline-prompt
                active-text="开启"
                inactive-text="关闭"
              />
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { Ref } from "vue";
import TitleIcon from "@/assets/app/icon/myOrder.png";
import OperationTitle
  from "@/views/activity/actApp/components/default/operationComponents/operationTitle/OperationTitle.vue";

interface IPageConfig {
  entrances: {
    name: string;
    status: number;
    enable: boolean;
  }[];
}

const props = withDefaults(
  defineProps<{
    pageConfig: IPageConfig;
  }>(),
  {
    pageConfig: () => ({
      entrances: [
        {
          name: "全部",
          status: -1,
          enable: true,
        },
        {
          name: "待付款",
          status: 0,
          enable: true,
        },
        {
          name: "待审核",
          status: 11,
          enable: true,
        },
        {
          name: "待提货",
          status: 2,
          enable: true,
        },
        {
          name: "待发货",
          status: 3,
          enable: true,
        },
        {
          name: "待收货",
          status: 4,
          enable: true,
        },
        {
          name: '已完成',
          status: 5,
          enable: true,
        },
        {
          name: '已关闭',
          status: 6,
          enable: true,
        },
      ],
    }),
  }
);
const emits = defineEmits(["changeStyle"]);

watch(props, () => {
  emits("changeStyle", props.pageConfig);
});

onMounted(() => {
});
</script>

<style lang="scss" scoped>
@use "../styles/operation";

.add-item {
  width: 100%;
  display: block !important;

  p {
    padding: 10px 0;
  }

  .add-item-input {
    background: #f4f3f7;
    border-radius: 4px;
    padding: 10px 20px 0 10px;
    color: #999;
    position: relative;
    display: flex;

    p {
      width: 60px;
    }

    :deep(.el-input) {
      font-size: 12px;
      height: 30px;
      width: calc(100% - 60px);
    }

    &.extra-li {
      justify-content: center;
    }

    .link-div {
      width: calc(100% - 80px);
      display: flex;
      align-items: center;
      background: #e8effc;
      border: 0;
      padding-left: 16px;
      cursor: pointer;
      position: relative;

      :deep(.el-icon) {
        margin-right: 10px;
      }

      :deep(.el-input) {
        font-size: 12px;
        height: 30px;
        width: calc(100% - 30px);
      }

      .close-btn {
        position: absolute;
        right: 5px;
      }
    }

    .sure-close {
      position: absolute;
      right: 5px;
      top: 5px;
      cursor: pointer;
    }
  }

  .add-item-input:last-child {
    padding-bottom: 10px;
  }
}


.title-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
}
</style>
